<template>
    <div id="background">
        <el-container>
            <el-header id="baoMingHead">
                <el-row type="flex" style="height:80%;display:flex;align-items: flex-end">
                    <el-col :xs="2" :sm="2" :md="2" :offset="1" class="imgCol">
                        <img v-bind:src="backIcon" class="backSize" @click="back" />
                    </el-col>
                    <el-col :xs="6" :sm="6" :md="6" :offset="6" class="imgCol">
                        <span class="titleSize">考证报名</span>
                    </el-col>
                </el-row>
            </el-header>
            <el-main id="baoMingMain">
                <el-row class="mingChengRow">
                    <el-col style="width:30%;">
                    <span >
                        证书名称
                    </span>
                    </el-col>
                    <el-col style="width:70%;">
                    <span >
                        {{zhengShuJs}}
                    </span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col class="imgCol">
                        <div class="kzline"></div>
                    </el-col>
                </el-row>
                <el-row class="yaoQiuRow">
                    <el-col style="width:30%;">
                    <span>
                        报名要求
                    </span>
                    </el-col>
                    <el-col style="width:70%;" >
                        <el-row v-for="bmyq in baoMingYq" :key="bmyq">
                            <span >
                                {{bmyq}}
                            </span>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col class="imgCol">
                        <div class="bmline"></div>
                    </el-col>
                </el-row>
                <el-row style="height:40px;">
                    <el-col style="width:30%;text-align:center;">
                        <span class="xinXiTitle">姓名</span>
                    </el-col>
                    <el-col style="width:70%;margin-top:10px;">
                        <!-- <el-input v-model="name" placeholder="必填" class="tianXieNeiRong"></el-input> -->
                        <span style="font-size:14px;color:#707070;margin-left:10px;">{{kaoZhengXingMing}}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col class="imgCol">
                        <div class="kzline"></div>
                    </el-col>
                </el-row>
                <el-row style="height:40px;">
                    <el-col style="width:30%;text-align:center;">
                        <span class="xinXiTitle">身份证号码</span>
                    </el-col>
                    <el-col style="width:70%;margin-top:10px;">
                        <span style="font-size:14px;color:#707070;margin-left:10px;">{{kaoZhengShenFengZheng}}</span>
                        <!-- <el-input v-model="sfzhm" placeholder="必填" class="tianXieNeiRong"></el-input> -->
                    </el-col>
                </el-row>
                <el-row>
                    <el-col class="imgCol">
                        <div class="kzline"></div>
                    </el-col>
                </el-row>
                <el-row style="height:40px;">
                    <el-col style="width:30%;text-align:center;">
                        <span class="xinXiTitle">联系方式</span>
                    </el-col>
                    <el-col style="width:70%;margin-top:10px;">
                        <!-- <el-input v-model="lxfs" placeholder="必填" class="tianXieNeiRong"></el-input> -->
                        <span style="font-size:14px;color:#707070;margin-left:10px;">{{kaoZhengLianXiFangShi}}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col class="imgCol">
                        <div class="kzline"></div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col style="width:30%;text-align:center;">
                        <span class="xinXiTitle">考证地点</span>
                    </el-col>
                   <el-col style="width:70%;">
                       <el-select v-model="value1" placeholder="请选择" style="width:95%;">
                            <el-option
                                v-for="item in peiXunDiDian"
                                :key="item.value"
                                :label="item.location"
                                :value="item.locationId">
                            </el-option>
                        </el-select>
                   </el-col>
                </el-row>
                <el-row>
                    <el-col class="imgCol">
                        <div class="kzline"></div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col style="width:30%;text-align:center;">
                        <span class="xinXiTitle">考证时间</span>
                    </el-col>
                   <el-col style="width:70%;">
                       <el-select v-model="value2" placeholder="请选择" style="width:95%;">
                            <el-option
                                v-for="item in peiXunShiJian"
                                :key="item.value"
                                :label="item.time"
                                :value="item.timeId">
                            </el-option>
                        </el-select>
                   </el-col>
                </el-row>
                <el-row>
                    <el-col class="imgCol">
                        <div class="kzline"></div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
        <!-- <div style="backgroundColor:#ffffff">
                <el-row type="flex" class="imgCol" style="position:fixed;bottom:5px;width:100%">
                    <el-col  :xs="12" :sm="12" :md="12">
                        <button class="baoMingJiaGe">{{'¥'+baoMingFei}}</button>
                    </el-col>
                    <el-col  :xs="12" :sm="12" :md="12">
                        <button class="baoMingBtn">
                            报名
                        </button>
                    </el-col>
                </el-row>
        </div> -->
        <div style="backgroundColor:#ffffff">
                <el-row type="flex" class="imgCol" style="position:fixed;bottom:10px;width:100%"> 
                    <button class="spbtn" style="width: 80%;" @click="kaoZhengBaoMing">
                       <!-- <span class="spBtnWords" style="margin-right:5px;">{{'¥'+baoMingFei}}</span>
                       <span class="spBtnWords" style="margin-right:10px;">|</span> -->
                       <span class="spBtnWords">立即报名</span>
                    </button>
                </el-row>
        </div>
    </div>    
</template>

<script>
import { Toast } from 'vant'
import backIcon from '../../assets/img/mine/back.png'
export default {
    data(){
        return{
            kaoZhengLianXiFangShi:'',
            kaoZhengShenFengZheng:'',
            kaoZhengXingMing:'',
            zhengShuJs:'',
            locationId:1,
            credentialId:1,
            baoMingYq:[],
            baoMingFei:0,
            peiXunShiJian:[],
            value2:'',
            peiXunDiDian:[],
            value1:'',
            lxfs:'',
            sfzhm:'',
            name:'',
            backIcon:backIcon,
            normalHeight:document.documentElement.clientHeight,
            //绑定支付通道
            pays:{"":""},
            //绑定订单号
            order:'',
        }
    },
    mounted(){
        var credentialId=this.$route.query.credentialId;
        this.credentialId=credentialId;
        
        var zhengShuJs=this.$route.query.zhengShuJs;
        this.zhengShuJs=zhengShuJs;

        var bg = document.getElementById("background");
       // this.normalHeight=document.documentElement.clientHeight;
        console.log("height:"+this.normalHeight);
        bg.style.height = this.normalHeight+"px";
        bg.style.backgroundColor = "#FFFFFF"
        bg.style.margin = "0px";

        var head=document.getElementById("baoMingHead");
        var headHeight=this.normalHeight/30 *4 ;
        console.log("headHeight:"+headHeight);
        head.style.height=headHeight+"px";

        var main=document.getElementById("baoMingMain");
        var mainHeight=this.normalHeight/30 *22 ;
        main.style.height=mainHeight+"px";

        // var foot=document.getElementById("baoMingFoot");
        // var footHeight=this.normalHeight/30 *4 ;
        // foot.style.height=footHeight+"px";

        this.getBaoMingYq();
        this.getPeiXunDiDian();
        this.getPeiXunShiJian();
        this.getShenFengXinXi();
        //准备好支付通道
       // this.plusReady();
    },
    methods:{
        kaoZhengBaoMing(){
            console.log('时间ID'+this.value1);
            var URL=this.IP.IP+'/credential/enroll';
            this.$ajax({
                    method:'post',
                    url:URL,
                    params: {
                        timeId:this.value1,
                    },
                }).then(response =>{
                    if(response.data.data!=null){
                        Toast('报名成功');
                    }else{
                        Toast(response.data.msg);
                    }
                    console.log('提示信息：'+response.data.msg);
                }).catch(error => {
                console.log('报名失败');
                });
        },
        getShenFengXinXi(){
            var URL=this.IP.IP+'/user/enrollInfo';
            this.$ajax({
                    method:'get',
                    url:URL,
                }).then(response =>{
                this.kaoZhengXingMing=response.data.data.realname;
                this.kaoZhengShenFengZheng=response.data.data.id;
                this.kaoZhengLianXiFangShi=response.data.data.contact;
                // console.log(response);
                }).catch(error => {
                console.log('sad');
                });
        },
        getPeiXunShiJian(){
            var URL=this.IP.IP+'/credential/time';
            console.log(URL);
            this.$ajax({
                method:'get',
                url:URL,
                params: {
                        locationId:this.locationId,
                },
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    this.peiXunShiJian=response.data.data;
                }else{
                    Toast(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
            })
        },
        getPeiXunDiDian(){
            var URL=this.IP.IP+'/credential/location';
            console.log(URL);
            this.$ajax({
                method:'get',
                url:URL,
                params: {
                        credentialId:this.credentialId,
                },
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    this.peiXunDiDian=response.data.data;
                }else{
                    Toast(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
            })
        },
        getBaoMingYq(){
            var URL=this.IP.IP+'/credential/checked';
            console.log(URL);
            this.$ajax({
                method:'get',
                url:URL,
                params: {
                        credentialId:this.credentialId,
                },
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    this.baoMingYq=response.data.data;
                }else{
                    this.baoMingYq[0]='无报名要求'
                }
            }).catch(error=>{
                console.log(error);
            })
        },
        back(){
            console.log("back:");
            this.$router.go(-1);
        },
        //准备支付通道
        plusReady() {
            var that = this;
            console.log("输出pays:");
            console.log(that.pays);
            // var pays={};
            // 获取支付通道
            plus.payment.getChannels(function (channels) {
            for (var i in channels) {
                var channel = channels[i];
                if (channel.id == 'qhpay' || channel.id == 'qihoo') { // 过滤掉不支持的支付通道：暂不支持360相关支付
                    continue;
                }
                console.log(channel.id);
                console.log(channel);
                that.pays[channel.id] = channel;
            }
            }, function (e) {
                console.log('获取支付通道失败：'+e.message);
            });
        },
        //考证报名付款
        payKaoZheng(){
            var w=null;
            var that=this;
            var url="https://openapi.alipay.com/gateway.do"
            // 支付
            var appid=plus.runtime.appid;
	        if(navigator.userAgent.indexOf('StreamApp')>=0){
		          appid='Stream';
            }
            console.log("appid:"+appid);
            w=plus.nativeUI.showWaiting();
    
            var xhr=new XMLHttpRequest();

            this.getRes(w);

            xhr.onreadystatechange=function(){
                console.log(xhr.readyState);
                console.log(xhr.status);
                switch(xhr.readyState){
                  case 4:
                      w.close();
                      w=null;
                      if(xhr.status==200){
                        console.log('----- 请求订单成功 -----');
                        //console.log(xhr.responseText);
                        // var order=xhr.responseText;
                        console.log(that.order);
                        plus.payment.request(that.pays['alipay'],that.order,function(result){
                          console.log('----- 支付成功 -----');
                          console.log(JSON.stringify(result));
                            plus.nativeUI.alert('支付成功！',function(){
						            back();
					            },'支付成功');
                          },function(e){
                            console.log('----- 支付失败 -----');
                            console.log('['+e.code+']：'+e.message);
                            plus.nativeUI.alert('支付失败', null, '支付失败：'+e.code);
                        });
                      }else{
                        console.log('----- 请求订单失败 -----');
                        console.log( xhr.status );
                        plus.nativeUI.alert('获取订单信息失败！', null);
                      }
                    break;
                  default:
                    break;
              }
            }
            xhr.open('GET',url);
	        console.log('请求支付订单：'+url);
	        xhr.send();
        },
        //得到订单号
        getRes(w){
             var URL=this.IP.IP+'/pay/params';
            console.log(URL);
            console.log(this.trainClassTimeId);

            this.axios({
               method:'get',
               url:URL,
               params:{
                 goodId:this.credentialId,
                 goodType:'TRAINCLASSTIME'
               }
           }).then(response=>{
               var code=0;
               code=response.data.code;
               if(code==0){
                    this.order=response.data.data;
                    console.log("order:");
                    console.log(this.order);
               }else{
                  w.close();
                   Toast(response.data.msg);
               }   
           }).catch(error=>{
               console.log(error);
           })
        },
        
    }
}
</script>

<style>
.spBtnWords{
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: #FFFFFF;
}
.spbtn{
    line-height: 40px;
    width: 80%;
    background-color: #53cdf5;
    border-style: none;
    outline: none;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    border-radius: 25px;
}
/* .baoMingJiaGe{
    color: #f16161;
    border-style: none;
    outline: none;
    height:40px;
    width:100%;
    background-color: #FFFFFF;
}
.baoMingBtn{
    background-color: #53cdf5;
    color:#ffffff;
    border-style: none;
    outline: none;
    height:40px;
    width:80%;
} */
.imgCol{
    display:flex;
    align-items:center;
    justify-content:center
}
/* .tianXieNeiRong .el-input__inner {
    font-size: 1em;
    width:90%;
    border: none;
    border-color: #F0F0F0;
    background-color: rgba(255, 255, 255, 0);
    color: #707070;
    border-radius: 0px;
} */
.xinXiTitle{
    font-size: 15px;
    color: #707070;
    display: flex;
    justify-content: center;
    
    margin-top: 10px;
}
.kzline{
    width: 100%;
    height: 2px;
    background-color: #F0F0F0;
    margin-bottom: 5px;
    margin-top: 5px;
}
.bmline{
    width: 100%;
    height: 6px;
    background-color: #F0F0F0;
    margin-bottom: 10px;
}
.yaoQiuRow{
    color: #707070;
    font-size: 15px;
    height:44px;
    padding-left: 15px;
    padding-right: 15px;
}
.mingChengRow{
    color: #707070;
    font-size: 15px;
    height:44px;
    padding-left: 15px;
    display:flex;
    align-items:center;
    
}
#baoMingHead{
  background-color: #53cdf5;
}
#baoMingMain{
    padding: 0;
    background: #FFFFFF;
}
.backSize{
    height: 26px;
}
.titleSize{
    font-size:1.125em;
    color:#ffffff
}
@media screen and (max-height: 600px){
  .backSize{
      height: 22px;
  }
  .titleSize{
      font-size: 1em;
  }
}
</style>
